<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 22 24"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path data-follow-stroke="currentColor" data-follow-fill="currentColor" d="M21.188 17.676c-.288-.397-.577-.793-.901-1.082a1081.69 1081.69 0 0 0-9.81-8.295c-.47-.397-.65-.793-.65-1.37.037-1.587 0-3.174 0-4.761 0-.794-.396-1.226-1.226-1.19-1.046.036-2.092 0-3.137 0H2.037C1.316.978.92 1.447.991 2.06 1.1 2.817.883 3.466.667 4.15c-.18.577-.325 1.227.108 1.732.577.649.866 1.406 1.046 2.236.072.396.252.757.54 1.01 1.227 1.045 1.444 2.74 2.706 3.75.108.072.144.18.108.325-.216 1.226.469 1.983 1.334 2.669.47.397.794.865.974 1.478.397 1.335.974 1.732 2.344 1.768.253 0 .541-.108.758.144.685.757 1.731.865 2.56 1.406.614.397 1.155.686 1.335 1.407.18.721.65 1.01 1.406.938a37.818 37.818 0 0 1 3.499-.145c1.442-.036 1.767-.432 1.262-1.839-.252-.649-.144-1.118.397-1.515.613-.613.577-1.226.144-1.839Zm-1.623 1.55c-.397.578-.433.758.072 2.417-1.262 0-2.38-.036-3.534.036-.433.036-.65-.108-.794-.505-.252-.83-.865-1.37-1.695-1.587-.469-.144-.613-.685-.937-.72-1.046-.145-1.768-1.155-2.922-1.01-.577.072-1.118-.109-1.262-.758-.216-1.118-.902-1.875-1.695-2.56-.433-.397-.721-.794-.505-1.407.108-.325.108-.721-.18-.938-1.299-.938-1.551-2.669-2.777-3.679-.397-.324-.577-.865-.613-1.37-.073-.65-.289-1.19-.722-1.587-.396-.36-.396-.757-.216-1.19.144-.36.397-.758.36-1.082-.144-1.01.397-1.082 1.19-1.046 1.515.036 2.994.036 4.509 0 .685-.036.938.108.901.866-.072 1.37 0 2.777-.036 4.147-.036.866.289 1.479 1.01 2.056 2.958 2.452 5.915 4.977 8.872 7.502.253.216.541.396.758.613.288.288.649.577.83.937.18.47-.397.577-.614.866Z" stroke-width=".5" :fill="_fill" :stroke="_stroke"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class CcpaCpra extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
